<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
</head>
<style>
    *{margin: 0;padding:0;}
    .choice{position: absolute;height:300px;width:500px;top: 20%;left: 25%;border:10px solid #20032f;background: #7509ad;color: #fff}
    .choice li{float: left;list-style: none;padding: 20px;}
    .box_con{position: absolute;left: 20px;top: 50px}
    ul li input[type="radio"]{position:absolute;left: -9999px;top:-9999px;}
    /*下面两行是代码的核心*/
    .box_con{display: none}
    .choice [id^="box"]:checked ~ [id^="con"]{display: block;}

</style>
<body>
<ul class="choice">
    <li>
        <!-- name必须相同 -->
        <input type="radio" name="tab" id="box1" checked>
        <label for="box1">选项卡1</label>
        <div class="box_con" id="con21">选项卡1的内容</div>
    </li>
    <li>
        <input type="radio" name="tab" id="box2" checked>
        <label for="box2">选项卡2</label>
        <div class="box_con" id="con2">选项卡2的内容</div>
    </li>
</ul>
</body>
</html>